<template>
	<view class="videobox">
		<view class="videos">
			<view class="videoitem">
				<image class="video-image" :src="curl+videodata.picture"></image>
				<view class="video-title">{{videodata.title}}</view>
				<view class="toweb" @click="topushweb(videodata.link)">点击查看</view>
			</view>
			<view class="closeBtn" @click="closevideo">
				<view class="closevideo" >
						<text class="list-icon">&#xe608;</text>
				</view>
			</view>
		</view>
		
		<view class="videobg"></view>
	</view>
</template>

<script>
	import {common} from '@/common/publish.js';
	export default{
		props:{
			videodata:Object
		},
		data(){
			return{
				curl:common.csurl
			}
		},
		onLoad(event) {
			//console.log(JSON.stringify(this.videodata))
		},
		methods:{
			topushweb(urls){
				this.$emit('isshowvideofn')
				var url = urls.split('?')
				if(url[1]){
					var new2 = url[1].replace(/&/g,"---").replace(/=/g,"--")
					uni.navigateTo({
						url: '/pages/pushwebview/pushwebview?url='+url[0]+'&otrcan='+new2
					});
				}else{
					uni.navigateTo({
						url: '/pages/pushwebview/pushwebview?url='+urls
					});
				}
			},
			closevideo(){
				this.$emit('isshowvideofn')
			}
		}
	}
</script>

<style>
	.videobox{
		width:100%;
		height:100%;
		position:fixed;
		left:0;
		top:0;
		right:0;
		bottom:0;
		z-index:100;
	}
	.videobg{
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.5);
		position:absolute;
		left:0;
		top:0;
	}
	.videos{
		position:absolute;
		left:50%;
		top:50%;
		transform:translate(-50%,-50%); 
		width:550upx;
		height:580upx;
		z-index:13;
		
	}
	.videoitem{
		width:100%;
		height:460upx;
		background:#ffffff;
		overflow:hidden;
		border-radius:16upx;
	}
	.videoitem .video-image{
		width:100%;
		height:220upx;
	}
	.video-title{
		text-align:center;
		line-height:40upx;
		height:100upx;
		font-size:28upx;
		color:#333333;
		padding:20upx 40upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.toweb{
		width:470upx;
		height:60upx;
		line-height:60upx;
		color:#fff;
		background-color:#0d70a7;
		font-size:28upx;
		border-radius: 30px;
		text-align:center;
		margin:14upx auto 0;
	}
	.closeBtn{
		width:100upx;
		height: 100upx;
		margin:50upx auto 0;
	}
	.closevideo{
		width:62upx;
		height:62upx;
		border-radius:50%;
		text-align:center;
		border:4upx solid #fff;
		color:#ffffff;
		z-index:15;
		margin:auto;
		background:transparent;
	}

	.list-icon {
		line-height: 50upx;
		font-size: 30upx;
		color: #ffffff;
		text-align: center;
		font-family: texticons;
	}
</style>
